<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__STATIC__/css/layui.css">
    <link rel="stylesheet" href="__STATIC__/css/view.css" />
    <link rel="icon" href="/favicon.ico">
    <style>
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
       
        .layui-input{
            width: 300px;
        }
    </style>
    <title>管理后台</title>
</head>

<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <form class="layui-form layui-card-body" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" width="200" id="shop_title" value="{$list.shop_title}" name="title" required lay-verify="required"
                                placeholder="请输入商品名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图片上传</label>
                        <div class="layui-input-block">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="test1">上传图片</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" src="http://127.0.0.1/ljm/public/uploads/shop/{$list.shop_img}" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">商品介绍</label>
                        <div class="layui-input-block">
                            <textarea name="desc" id="shop_desc"  placeholder="请输入商品介绍" class="layui-textarea">{$list.shop_desc}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-blue" onclick="article_save()">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {include file="common/footer"}
    <script src="__STATIC__/layui.all.js"></script>
    <script>
        var shop_img = '{$list.shop_img}'
        function article_save() {
            var shop_title = $("#shop_title").val();
            var shop_desc = $("#shop_desc").val();
            if (!shop_img) {
                layer.msg("请上传图片");
                return;
            }
            if(!shop_title){
                layer.msg("请输入商品名称");
                return;
            }
            if(!shop_desc){
                layer.msg("请输入商品介绍");
                return;
            }
            $.ajax({
                url: '{:Url("Shop/edit")}',
                type: 'POST',
                data: {
                    "id":'{$list.id}',
                    "shop_title": shop_title,
                    "shop_desc": shop_desc,
                    "shop_img": shop_img
                },
                dataType: 'text',
                success: function (res) {
                    layer.msg('修改成功');
                }
            })
        }
        layui.use('upload', function () {
            var $ = layui.jquery,
                upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1',
                url: "{:Url('Upload/upload')}",
                done: function (res) {
                    //如果上传失败
                    if (res.code == 1) {
                        shop_img = res.filepath
                        shop_img.replace('\\','/')
                        $('#demo1').attr('src', 'http://127.0.0.1/ljm/public/uploads/shop/' + shop_img);
                        // console.log(res.filepath)
                    } else {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                },
                error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html(
                        '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
                    );
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        })
    </script>
</body>

</html>